# -*- coding: utf-8 -*-
# frontend/pages/03_📚_帮助文档.py
import streamlit as st

st.set_page_config(
    page_title="📚 帮助文档",
    page_icon="📚",
    layout="wide"
)

def main():
    st.title("📚 帮助文档")
    st.markdown("---")
    
    # 创建侧边栏导航
    with st.sidebar:
        st.markdown("### 📖 文档导航")
        doc_section = st.radio(
            "选择章节",
            [
                "🚀 快速开始",
                "💬 聊天功能",
                "🤖 模型管理",
                "⚙️ 系统设置",
                "🔧 故障排除",
                "❓ 常见问题"
            ]
        )
    
    if doc_section == "🚀 快速开始":
        render_quick_start()
    elif doc_section == "💬 聊天功能":
        render_chat_guide()
    elif doc_section == "🤖 模型管理":
        render_model_guide()
    elif doc_section == "⚙️ 系统设置":
        render_settings_guide()
    elif doc_section == "🔧 故障排除":
        render_troubleshooting()
    elif doc_section == "❓ 常见问题":
        render_faq()

def render_quick_start():
    """快速开始指南"""
    st.header("🚀 快速开始")
    
    st.markdown("""
    ### 欢迎使用智能模型群聊系统！
    
    这是一个功能强大的多模型对话平台，让您可以同时与多个AI模型进行对话。
    
    #### 📝 第一步：选择模型
    1. 在左侧边栏中，您可以看到所有可用的AI模型
    2. 勾选您想要对话的模型（可以选择多个）
    3. 绿色表示在线，红色表示离线
    
    #### 💬 第二步：开始对话
    1. 在主聊天区域的输入框中输入您的问题
    2. 点击"🚀 发送"按钮或按Enter键发送
    3. 所有选中的模型都会回复您的问题
    
    #### 🎯 第三步：指定模型
    - 如果您想让特定模型回复，可以在消息前加上 `@模型名`
    - 例如：`@GPT-4 请帮我写一首诗`
    - 这样只有GPT-4会回复您的问题
    """)
    
    # 添加视频教程
    st.markdown("### 🎥 视频教程")
    st.info("📹 视频教程制作中，敬请期待...")
    
    # 添加示例对话
    st.markdown("### 💡 示例对话")
    
    with st.expander("查看示例对话"):
        st.markdown("""
        **用户**: 你好，请介绍一下人工智能的发展历史
        
        **GPT-4**: 🧠 人工智能的发展可以追溯到1950年代...
        
        **文心一言**: 🌟 人工智能发展经历了几个重要阶段...
        
        **通义千问**: 🔮 从图灵测试到深度学习，AI发展经历了...
        """)

def render_chat_guide():
    """聊天功能指南"""
    st.header("💬 聊天功能详解")
    
    col1, col2 = st.columns(2)
    
    with col1:
        st.markdown("""
        ### 🎯 基础功能
        
        #### 📝 发送消息
        - 在底部输入框中输入文本
        - 支持多行输入（Shift+Enter换行）
        - 点击发送或按Enter键发送
        
        #### 🏷️ 快捷标签
        - 使用预设的快捷标签快速@模型
        - 点击标签自动添加到输入框
        
        #### 🗑️ 清空对话
        - 点击"清空"按钮清除所有消息
        - 注意：此操作不可撤销
        """)
    
    with col2:
        st.markdown("""
        ### 🚀 高级功能
        
        #### @ 指定模型
        - `@GPT-4` - 只让GPT-4回复
        - `@文心一言` - 只让文心一言回复
        - 可以同时@多个模型
        
        #### 📊 消息统计
        - 查看对话轮数
        - 统计各模型回复次数
        - 分析响应时间
        
        #### 💾 对话保存
        - 系统自动保存对话历史
        - 可导出为文本或JSON格式
        """)
    
    # 添加功能演示
    st.markdown("### 🎭 功能演示")
    
    demo_tab1, demo_tab2, demo_tab3 = st.tabs(["基础对话", "指定模型", "批量提问"])
    
    with demo_tab1:
        st.code("""
        用户输入: "今天天气怎么样？"
        
        系统行为:
        1. 向所有选中的模型发送消息
        2. 并行处理各模型的响应
        3. 按响应速度依次显示回复
        """)
    
    with demo_tab2:
        st.code("""
        用户输入: "@GPT-4 请写一个Python函数"
        
        系统行为:
        1. 解析@指令，识别目标模型
        2. 只向GPT-4发送请求
        3. 显示GPT-4的回复
        """)
    
    with demo_tab3:
        st.code("""
        用户输入: "请分别从技术和商业角度分析AI发展"
        
        系统行为:
        1. 向所有模型发送相同问题
        2. 收集不同角度的回复
        3. 用户可对比分析各种观点
        """)

def render_model_guide():
    """模型管理指南"""
    st.header("🤖 模型管理指南")
    
    # 模型介绍
    st.markdown("### 📋 可用模型")
    
    models_info = [
        {
            "name": "GPT-4",
            "icon": "🧠",
            "description": "OpenAI最先进的大语言模型",
            "strengths": ["逻辑推理", "代码生成", "创意写作"],
            "use_cases": ["编程问题", "学术研究", "创意项目"]
        },
        {
            "name": "文心一言",
            "icon": "🌟",
            "description": "百度开发的大语言模型",
            "strengths": ["中文理解", "文化内容", "实用建议"],
            "use_cases": ["中文创作", "文化问题", "生活建议"]
        },
        {
            "name": "通义千问",
            "icon": "🔮",
            "description": "阿里云推出的大语言模型",
            "strengths": ["商业分析", "技术问答", "数据处理"],
            "use_cases": ["商业决策", "技术咨询", "数据分析"]
        },
        {
            "name": "Claude",
            "icon": "🛡️",
            "description": "Anthropic开发的安全AI助手",
            "strengths": ["伦理思考", "安全回复", "详细分析"],
            "use_cases": ["伦理讨论", "敏感话题", "深度分析"]
        }
    ]
    
    for model in models_info:
        with st.expander(f"{model['icon']} {model['name']} - {model['description']}"):
            col1, col2 = st.columns(2)
            
            with col1:
                st.markdown("**🎯 擅长领域:**")
                for strength in model['strengths']:
                    st.markdown(f"- {strength}")
            
            with col2:
                st.markdown("**💡 推荐用途:**")
                for use_case in model['use_cases']:
                    st.markdown(f"- {use_case}")
    
    # 模型配置
    st.markdown("### ⚙️ 模型配置")
    
    st.markdown("""
    #### 温度设置 (Temperature)
    - **0.0-0.3**: 更加准确和确定的回复
    - **0.4-0.7**: 平衡准确性和创造性
    - **0.8-1.0**: 更加创造性和多样化的回复
    
    #### 最大令牌数 (Max Tokens)
    - 控制回复的最大长度
    - 建议设置: 1000-2000 (一般对话)
    - 长文本生成: 2000-4000
    
    #### Top P
    - 控制词汇选择的多样性
    - 推荐值: 0.9 (平衡质量和多样性)
    """)

def render_settings_guide():
    """系统设置指南"""
    st.header("⚙️ 系统设置指南")
    
    setting_tabs = st.tabs(["🤖 模型配置", "🎨 界面设置", "🔐 安全设置", "📝 日志配置"])
    
    with setting_tabs[0]:
        st.markdown("""
        ### 🤖 模型配置说明
        
        #### 基础参数
        - **温度**: 控制回复的随机性和创造性
        - **最大令牌数**: 限制回复的长度
        - **Top P**: 控制词汇选择的多样性
        
        #### 性能参数
        - **超时时间**: 模型响应的最大等待时间
        - **重试次数**: 请求失败时的重试次数
        - **缓存**: 启用后可提高相同问题的响应速度
        
        #### 💡 推荐配置
        ```
        创意写作: Temperature=0.8, Max Tokens=2000
        技术问答: Temperature=0.3, Max Tokens=1500
        日常对话: Temperature=0.7, Max Tokens=1000
        ```
        """)
    
    with setting_tabs[1]:
        st.markdown("""
        ### 🎨 界面个性化
        
        #### 主题选择
        - **明亮模式**: 适合白天使用，护眼舒适
        - **深色模式**: 适合夜间使用，减少眼疲劳
        - **彩虹模式**: 多彩主题，增加趣味性
        - **自然模式**: 自然色彩，温馨舒适
        
        #### 字体大小调节
        - 根据屏幕尺寸和个人喜好调整
        - 建议范围：12-20px
        
        #### 聊天界面优化
        - **显示时间戳**: 帮助追踪对话时间
        - **显示头像**: 增强视觉体验
        - **消息动画**: 提升交互体验
        - **自动滚动**: 自动跟踪最新消息
        """)
    
    with setting_tabs[2]:
        st.markdown("""
        ### 🔐 安全与隐私
        
        #### 数据加密
        - 所有数据传输都经过加密处理
        - 本地存储使用AES-256加密
        
        #### 数据保留策略
        - **7天**: 适合临时使用
        - **30天**: 推荐设置，平衡存储和便利性
        - **90天**: 适合长期项目
        - **1年**: 适合研究和存档
        - **永久**: 谨慎选择，注意隐私风险
        
        #### 隐私保护
        - **匿名模式**: 不记录用户身份
        - **数据分析**: 可选择是否允许系统优化
        - **数据导出**: 用户可随时导出自己的数据
        """)
    
    with setting_tabs[3]:
        st.markdown("""
        ### 📝 日志管理
        
        #### 日志级别
        - **DEBUG**: 最详细，用于开发调试
        - **INFO**: 一般信息，推荐使用
        - **WARNING**: 警告信息
        - **ERROR**: 错误信息
        - **CRITICAL**: 严重错误
        
        #### 日志轮转
        - 防止日志文件过大
        - 自动压缩历史日志
        - 定期清理过期日志
        """)

def render_troubleshooting():
    """故障排除指南"""
    st.header("🔧 故障排除")
    
    # 常见问题分类
    issue_category = st.selectbox(
        "选择问题类型",
        ["🚫 连接问题", "⚡ 性能问题", "💬 聊天问题", "⚙️ 配置问题"]
    )
    
    if issue_category == "🚫 连接问题":
        st.markdown("""
        ### 🚫 连接问题解决方案
        
        #### 问题1: 无法连接到服务器
        **症状**: 页面显示连接错误或超时
        
        **解决方案**:
        1. 检查网络连接是否正常
        2. 确认服务器地址配置正确
        3. 检查防火墙设置
        4. 尝试刷新页面或重启浏览器
        
        ```bash
        # 检查服务器状态
        curl -I http://localhost:8080/health
        
        # 检查端口占用
        netstat -tulpn | grep 8080
        ```
        """)
        
        st.markdown("""
        #### 问题2: API密钥错误
        **症状**: 提示API密钥无效或过期
        
        **解决方案**:
        1. 检查API密钥是否正确输入
        2. 确认密钥是否已过期
        3. 验证密钥权限是否足够
        4. 联系API提供商获取新密钥
        """)
    
    elif issue_category == "⚡ 性能问题":
        st.markdown("""
        ### ⚡ 性能问题解决方案
        
        #### 问题1: 响应速度慢
        **症状**: 模型回复时间过长
        
        **解决方案**:
        1. 减少最大令牌数设置
        2. 启用缓存功能
        3. 选择响应更快的模型
        4. 检查网络延迟
        
        #### 问题2: 界面卡顿
        **症状**: 页面响应缓慢，操作延迟
        
        **解决方案**:
        1. 清理浏览器缓存
        2. 关闭不必要的浏览器标签
        3. 降低界面动画效果
        4. 清空历史对话记录
        """)
    
    elif issue_category == "💬 聊天问题":
        st.markdown("""
        ### 💬 聊天问题解决方案
        
        #### 问题1: 模型无响应
        **症状**: 发送消息后模型不回复
        
        **解决方案**:
        1. 检查模型是否在线
        2. 确认模型是否被选中
        3. 检查消息格式是否正确
        4. 尝试重新发送消息
        
        #### 问题2: 消息显示异常
        **症状**: 消息格式错乱或显示不完整
        
        **解决方案**:
        1. 刷新页面重新加载
        2. 检查浏览器兼容性
        3. 清空浏览器缓存
        4. 使用推荐的浏览器版本
        """)
    
    elif issue_category == "⚙️ 配置问题":
        st.markdown("""
        ### ⚙️ 配置问题解决方案
        
        #### 问题1: 设置无法保存
        **症状**: 修改设置后不生效
        
        **解决方案**:
        1. 确认有足够的权限保存设置
        2. 检查磁盘空间是否充足
        3. 验证配置文件路径是否正确
        4. 重启应用使设置生效
        
        #### 问题2: 主题显示异常
        **症状**: 界面颜色或样式显示错误
        
        **解决方案**:
        1. 重置为默认主题
        2. 清除浏览器缓存
        3. 检查CSS文件是否损坏
        4. 更新浏览器到最新版本
        """)
    
    # 联系支持
    st.markdown("---")
    st.markdown("""
    ### 📞 仍需帮助？
    
    如果以上解决方案都无法解决您的问题，可以通过以下方式联系我们：
    
    - 📧 Email: support@example.com
    - 💬 在线客服: [点击这里]()
    - 📱 QQ群: 123456789
    - 🔧 GitHub Issues: [提交问题](https://github.com/your-repo/issues)
    """)

def render_faq():
    """常见问题FAQ"""
    st.header("❓ 常见问题")
    
    # FAQ数据
    faq_data = [
        {
            "question": "🤔 支持哪些AI模型？",
            "answer": """
            目前支持的模型包括：
            - **GPT-4**: OpenAI的最新模型
            - **文心一言**: 百度的大语言模型
            - **通义千问**: 阿里云的AI模型
            - **Claude**: Anthropic的安全AI助手
            
            我们还在持续增加更多模型，敬请期待！
            """
        },
        {
            "question": "💰 使用需要付费吗？",
            "answer": """
            系统本身免费使用，但各个AI模型可能有以下费用：
            - **API调用费**: 根据各模型提供商的收费标准
            - **令牌消耗**: 按照输入输出的token数量计费
            - **高级功能**: 部分高级功能可能需要订阅
            
            建议查看各模型的官方定价页面了解详情。
            """
        },
        {
            "question": "🔐 数据安全性如何？",
            "answer": """
            我们非常重视数据安全：
            - **传输加密**: 所有数据传输使用HTTPS/TLS加密
            - **存储加密**: 本地数据使用AES-256加密存储
            - **访问控制**: 严格的权限管理和身份验证
            - **数据隔离**: 用户数据完全隔离，互不可见
            - **定期审计**: 定期进行安全审计和漏洞扫描
            """
        },
        {
            "question": "📱 支持移动设备吗？",
            "answer": """
            是的！我们的系统采用响应式设计：
            - **手机浏览器**: 完美支持iOS Safari、Android Chrome
            - **平板设备**: 优化了iPad和Android平板的显示
            - **触摸操作**: 支持手势操作和触摸交互
            - **离线功能**: 部分功能支持离线使用
            """
        },
        {
            "question": "🌍 支持多语言吗？",
            "answer": """
            当前主要支持中文和英文：
            - **界面语言**: 中文界面，英文即将推出
            - **对话语言**: 支持中文、英文等多种语言对话
            - **模型语言**: 不同模型有不同的语言优势
            - **本地化**: 正在开发更多语言版本
            """
        },
        {
            "question": "🔄 如何更新系统？",
            "answer": """
            系统更新非常简单：
            - **自动更新**: 系统会自动检查并提示更新
            - **手动更新**: 在设置页面可以手动检查更新
            - **版本回退**: 支持回退到上一个稳定版本
            - **更新日志**: 每次更新都有详细的更新说明
            """
        },
        {
            "question": "📊 可以导出对话记录吗？",
            "answer": """
            支持多种导出格式：
            - **文本格式 (.txt)**: 纯文本，便于阅读
            - **JSON格式 (.json)**: 结构化数据，便于处理
            - **PDF格式 (.pdf)**: 格式化文档，便于分享
            - **CSV格式 (.csv)**: 表格数据，便于分析
            
            可以选择导出特定时间段或特定模型的对话。
            """
        },
        {
            "question": "🚀 系统性能如何？",
            "answer": """
            我们致力于提供最佳性能：
            - **响应速度**: 平均响应时间 < 3秒
            - **并发支持**: 支持多用户同时使用
            - **负载均衡**: 智能分配请求到最佳节点
            - **缓存机制**: 智能缓存提高响应速度
            - **监控告警**: 24/7系统监控和故障告警
            """
        }
    ]
    
    # 搜索功能
    search_query = st.text_input("🔍 搜索问题", placeholder="输入关键词搜索...")
    
    # 过滤FAQ
    filtered_faq = faq_data
    if search_query:
        filtered_faq = [
            faq for faq in faq_data 
            if search_query.lower() in faq['question'].lower() or 
               search_query.lower() in faq['answer'].lower()
        ]
    
    # 显示FAQ
    if filtered_faq:
        for i, faq in enumerate(filtered_faq):
            with st.expander(faq['question']):
                st.markdown(faq['answer'])
    else:
        st.warning("🔍 没有找到相关问题，请尝试其他关键词。")
    
    # 提交新问题
    st.markdown("---")
    st.markdown("### 💭 没找到答案？")
    
    with st.form("new_question_form"):
        st.markdown("**提交您的问题，我们会尽快回复：**")
        
        col1, col2 = st.columns(2)
        with col1:
            user_name = st.text_input("👤 姓名（可选）")
            user_email = st.text_input("📧 邮箱（可选）")
        
        with col2:
            question_type = st.selectbox(
                "❓ 问题类型", 
                ["一般咨询", "技术问题", "功能建议", "故障报告", "其他"]
            )
            priority = st.selectbox("🔥 优先级", ["低", "中", "高"])
        
        question_content = st.text_area(
            "📝 问题描述", 
            height=150,
            placeholder="请详细描述您的问题..."
        )
        
        submitted = st.form_submit_button("📤 提交问题")
        
        if submitted and question_content:
            st.success("✅ 问题已提交！我们会在24小时内回复您。")
            st.balloons()

if __name__ == "__main__":
    main()